<template>
    <div class="top">
        <van-nav-bar left-text="消息" @click-right="onClickRight">
            <template #right>
                <van-icon name="setting" size="15" style="color: aliceblue" />
            </template>
        </van-nav-bar>
    </div>
    <div class="float">
        <div class="content" v-if="accountStore.account.url">
            <van-image round :src="accountStore.account.url" />
            <p>{{ accountStore.account.name }}</p>
        </div>
        <div class="bottom" v-else>
            <router-link to="/login">登录</router-link>/
            <router-link to="/register">注册</router-link>
        </div>
        <van-row>
            <van-col span="6" @click="bingCollection">
                <van-icon name="star-o" />
                <p>收藏</p>
            </van-col>
            <van-col span="6">
                <van-icon name="passed" />
                <p>订阅店铺</p>
            </van-col>
            <van-col span="6">
                <van-icon name="clock-o" />
                <p>足迹</p>
            </van-col>
            <van-col span="6">
                <van-icon name="bill-o" />
                <p>卡卷</p>
            </van-col>
        </van-row>
    </div>
    <van-cell
        title="我的订单"
        value="全部订单"
        is-link
        to="/Myorder"
        style="margin-top: 60px"
    />
    <van-row class="link">
        <van-col span="6" @click="bingOrderone"
            ><van-icon name="gold-coin-o" />待付款</van-col
        >
        <van-col span="6" @click="bingOrdertwo"
            ><van-icon name="send-gift-o" />待发货</van-col
        >
        <van-col span="6" @click="bingOrderthree"
            ><van-icon name="logistics" />待收货</van-col
        >
        <van-col span="6" @click="bingOrderfour"
            ><van-icon name="sign" />已完成</van-col
        >
    </van-row>
    <van-cell-group>
        <van-cell title="邀请好友" to="/invite" is-link />
    </van-cell-group>
    <van-cell-group>
        <van-cell title="我的拼团" to="/collage" is-link />
        <van-cell title="退款/售后" to="" is-link />
        <van-cell title="收货地址" to="/addressList" is-link />
        <van-cell title="兑换口令" to="" is-link />
    </van-cell-group>
</template>

<script setup lang="ts">
import { usrMy } from '../hooks/My'
const {
    accountStore,
    bingOrderone,
    bingOrdertwo,
    bingOrderthree,
    bingOrderfour,
    onClickRight,
    bingCollection
} = usrMy()
</script>

<style lang="scss" scoped>
.top {
    height: 45vw;
    width: 100%;
    background: url(../../public/image/4f87fa71bc9fcec695f04caf3dc66c2.jpg)
        no-repeat 0px 0px/100% 100%;
    .van-nav-bar {
        background: transparent;
    }
    .van-nav-bar::after {
        border-bottom: 0px;
    }
    :deep(.van-nav-bar__text) {
        color: aliceblue;
    }
}
.float {
    width: 80%;
    height: 150px;
    background: #fff;
    position: absolute;
    top: 80px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #f4efef;
    .content {
        text-align: center;
        .van-image {
            width: 60px;
            height: 60px;
            position: absolute;
            top: -30px;
            bottom: 0;
            right: 0;
            left: 0;
            margin: 0 auto;
        }
        p {
            margin: 0;
            margin-top: 35px;
            margin-bottom: 10px;
            font-size: 22px;
            font-weight: 400;
        }
    }
    .bottom {
        text-align: center;
        font-size: 20px;
        line-height: 40px;
        a {
            color: #3f3c3c;
        }
    }
    .van-row {
        margin-top:15px ;
        text-align: center;
        .van-icon {
            font-size: 20px;
        }
        p {
            margin: 0;
            margin: 5px 0px;
            font-weight: 500;
        }
    }
}
.link {
    text-align: center;
    padding: 10px 0px;
    font-size: 15px;
    background-color: #fff;
    .van-icon {
        display: block;
        font-size: 30px;
        color: rgb(255, 183, 50);
    }
}
</style>
